<template>
  <view class="notLoggedIn">
    <view class="lang">
      <image @click="goBack(1)" src="@/static/image/77.png" mode="widthFix" />
      <view @click="goTo('/pages/notLoggedIn/lang')">
        {{ $t('reg.traditionalChinese') }}
        <image src="@/static/image/49.png" mode="widthFix" />
      </view>
    </view>
    <view class="title">
      <view>{{ $t('reg.register') }}</view>
      <view>{{ $t('reg.enterRegistrationInfo') }}</view>
    </view>
    <view class="ipt">
      <up-input :placeholder="$t('reg.enterEmail')" v-model="user_name" clearable class="item" border="none">
        <template #prefix>
          <image src="@/static/image/50.png" mode="widthFix" />
        </template>
      </up-input>
      <up-input :placeholder="$t('reg.enterPassword')" v-model="pass_word" clearable :password="eye" class="item" border="none">
        <template #prefix>
          <image src="@/static/image/52.png" mode="widthFix" />
        </template>
        <template #suffix>
          <i @click="eye = !eye" :class="eye ? 'hideEye' : 'showEye'"></i>
        </template>
      </up-input>
      <up-input :placeholder="$t('reg.reEnterPassword')" v-model="pass_word2" clearable :password="eye2" class="item" border="none">
        <template #prefix>
          <image src="@/static/image/52.png" mode="widthFix" />
        </template>
        <template #suffix>
          <i @click="eye2 = !eye2" :class="eye2 ? 'hideEye' : 'showEye'"></i>
        </template>
      </up-input>
      <up-input :placeholder="$t('reg.enterInvitationCode')" v-if="RegisterConfigObj.Register_Id_No" v-model="id_no" clearable class="item" border="none">
        <template #prefix>
          <image src="@/static/image/58.png" mode="widthFix" />
        </template>
      </up-input>
      <up-input :placeholder="$t('reg.enterVerificationCode')" v-if="RegisterConfigObj.Register_Verification_Code" v-model="verification_code" clearable class="item" border="none">
        <template #prefix>
          <image src="@/static/image/84.png" mode="widthFix" />
        </template>
        <template #suffix>
          <up-button class="btn" @tap="getCode">{{ tips }}</up-button>
          <up-code :seconds="seconds" @change="codeChange" ref="uCodeRef"></up-code>
        </template>
      </up-input>
    </view>
    <up-button class="btn" :text="$t('reg.registerButton')" @click="UserRegisterFn"></up-button>
    <view class="term" @click="isAgreement = !isAgreement">
      <i :class="{ selected: isAgreement }"></i>
      {{ $t('reg.agreementText') }}
      <text @click.stop>{{ $t('reg.termsOfService') }}</text>
      和
      <text @click.stop>{{ $t('reg.termsOfService') }}</text>
    </view>
    <view class="goReg">
      {{ $t('reg.alreadyHaveAccount') }}
      <text @click="goTo('/pages/notLoggedIn/index')">{{ $t('reg.loginNow') }}</text>
    </view>
    <customerService />
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const instance = getCurrentInstance()?.appContext.config.globalProperties;

import { UserRegister, SendRegisterVerificationCode } from "@/api/UserApi";
import { RegisterConfig } from "@/api/SystemApi";
let eye = ref<boolean>(true);
let eye2 = ref<boolean>(true);
let isAgreement = ref<boolean>(true);
let user_name = ref<string>('');
let pass_word = ref<string>();
let pass_word2 = ref<string>();
let id_no = ref<string>();
let verification_code = ref<string>();
// 獲取驗證碼
const tips = ref("");
const seconds = ref(60);
const uCodeRef = ref<any>(null);

const RegisterConfigObj = ref<any>({});
if (uni.getStorageSync("RegisterConfig")) {
  RegisterConfigObj.value = uni.getStorageSync("RegisterConfig");
}
RegisterConfig().then((e: any) => {
  RegisterConfigObj.value = e;
});

onLoad((options: any) => {
  if (options.id_no) {
    id_no.value = options.id_no;
  }
});

const codeChange = (text: any) => {
  tips.value = text;
};
const getCode = async () => {
  if (!user_name.value) {
    uni.showToast({ title: instance?.$t('reg.emailRequired'), icon: "none" });
    return;
  }
  if (instance?.validateEmail(user_name.value)) {
    if (uCodeRef.value?.canGetCode) {
      uni.showLoading({
        title: instance?.$t('reg.sendingVerificationCode'),
      });
      await SendRegisterVerificationCode({
        user_name: user_name.value,
      });
      uni.hideLoading();
      uni.showToast({ title: instance?.$t('reg.verificationCodeSent'), icon: "none" });
      uCodeRef.value.start();
    }
  }
};

const UserRegisterFn = () => {
  if (!user_name.value) {
    uni.showToast({ title: instance?.$t('reg.emailRequired'), icon: "none" });
    return;
  }
  if (!pass_word.value) {
    uni.showToast({ title: instance?.$t('reg.passwordRequired'), icon: "none" });
    return;
  }
  if (!pass_word2.value) {
    uni.showToast({ title: instance?.$t('reg.rePasswordRequired'), icon: "none" });
    return;
  }
  if (!id_no.value && RegisterConfigObj.value.Register_Id_No) {
    uni.showToast({ title: instance?.$t('reg.invitationCodeRequired'), icon: "none" });
    return;
  }
  if (!verification_code.value && RegisterConfigObj.value.Register_Verification_Code) {
    uni.showToast({ title: instance?.$t('reg.verificationCodeRequired'), icon: "none" });
    return;
  }
  if (!isAgreement.value) {
    uni.showToast({ title: instance?.$t('reg.agreeToTerms'), icon: "none" });
    return;
  }
  if (pass_word.value != pass_word2.value) {
    uni.showToast({ title: instance?.$t('reg.passwordsNotMatch'), icon: "none" });
    return;
  }
  UserRegister({
    user_name: user_name.value,
    pass_word: instance?.getRsaCode(pass_word.value),
    id_no: id_no.value,
    verification_code: verification_code.value,
  });
};
</script>

<style scoped lang="scss">
@import "../../static/scss/notLoggedIn.scss";
</style>